<template>
  <div>
    <div v-show="!isshow">
      <el-skeleton :rows="6" animated />
      <el-skeleton :rows="3" animated />
      <el-skeleton :rows="5" animated />
      <el-skeleton :rows="3" animated />
      <el-skeleton :rows="5" animated />
      <el-skeleton :rows="4" animated />

    </div>
    <div class="center_dialog" v-show="isshow">
      <!-- <h3>{{ realTime }}</h3> -->
      <el-form ref="form" label-position="left" :model="form" :rules="rules" label-width="50%">
        <div v-for="(v, i) in ValueList" :key="i">
          <!-- <label>类别:{{ v.inspectionTypeNameParent }}</label> -->
          <el-divider content-position="left"><label>类别:{{ v.inspectionTypeNameParent }} - {{
            v.inspectionTypeNameChildren
          }}</label></el-divider>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in v.inspectionProjectVoList" :key="index">
              <!-- 单项选择以及多项选择 -->
              <el-form-item v-if="item.resultType === '1' || item.resultType === '2'"
                :label="index + 1 + '.' + item.projectDescribe + ':'">
                <el-select :disabled="(title === '记录详情')" v-model="item.CheckValue" style="width:100%" placeholder="请选择"
                  :multiple="[false, false, true, false, true][item.resultType]" collapse-tags>
                  <el-option v-for="value in item.inspectionProjectResultList" :key="value.id" :label="value.optionName"
                    :value="value.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 单项输入 -->
              <el-form-item v-else-if="item.resultType === '3'" :label="index + 1 + '.' + item.projectDescribe + ':'">
                <el-input :disabled="(title === '记录详情')" v-model="item.inputValue" style="width:100%" placeholder="请输入">
                </el-input>
              </el-form-item>
              <!-- 多项输入 -->
              <el-form-item v-else :label="index + 1 + '.' + item.projectDescribe + ':'">
                <div v-for="(val, keys) in item.inspectionProjectResultList" :key="keys">
                  <el-input :disabled="(title === '记录详情')" v-model="val.inputValue"
                    style="width:100%;margin-bottom: 10px;" :placeholder="`请输入${val.optionName}`">
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-divider></el-divider>
        <el-form-item label="巡检日期" label-width="120px" prop="inspectionDate">
          <el-date-picker :disabled="(title === '记录详情')" v-model="form.inspectionDate" type="date" placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="异常情况" label-width="120px" prop="inspectionStatus">
          <el-radio-group :disabled="(title === '记录详情')" v-model="form.inspectionStatus">
            <el-radio :label="'0'">无异常</el-radio>
            <el-radio :label="'1'">有异常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-table v-if="form.inspectionStatus === '1'" :data="form.inspectionPlaceRecordAbnormalList"
          style="width: 100%">
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="故障描述" min-width="220" align="center">
            <template slot-scope="scope">
              <el-input :disabled="(title === '记录详情')" v-model="scope.row.faultDescribe"
                placeholder="请输入故障描述"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="异常处理描述" min-width="220" align="center">
            <template slot-scope="scope">
              <el-input :disabled="(title === '记录详情')" v-model="scope.row.faultHandleDescribe" placeholder="请输入异常处理描述">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="处理人" min-width="120" align="center">
            <template slot-scope="scope">
              <el-select :disabled="(title === '记录详情')" v-model="scope.row.handleUserId" style="width:100%"
                placeholder="请选择处理人">
                <el-option v-for="value in userList" :key="value.userId" :label="value.userName" :value="value.userId">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="处理日期" min-width="130" align="center">
            <template slot-scope="scope">
              <el-date-picker :disabled="(title === '记录详情')" v-model="scope.row.handleTime" type="date"
                placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button v-if="(scope.$index === 0)" :disabled="!(title !== '记录详情')" size="small" type="success"
                icon="el-icon-plus" @click="handleadd()">新增
              </el-button>
              <el-button v-else icon="el-icon-delete" :disabled="!(title !== '记录详情')" size="small" type="danger"
                @click="handleDelete(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <br>
    <div align="center" slot="footer" class="dialog-footer" v-if="!(title === '记录详情')">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="clear">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getrecordAddList, Updaterecord, Createdrecord } from "@/api/record/index.js";
import { listUser } from "@/api/system/user.js";

import { formatDateIndex } from '@/utils/index.js'
// import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    // Upload
  },
  data () {
    return {
      isshow: false,
      ValueList: [],
      userList: [],
      realTime: formatDateIndex(new Date()),
      form: {
        "inspectionDate": undefined, //巡检日期
        "inspectionStatus": '0',    //巡检状态（0无异常 1有异常 2处理中 3已处理）
        "recordJsonData": undefined,     //记录数据JSON串
        "inspectionPlaceRecordAbnormalList": [  //机房巡检记录关联异常对象 集合
          {
            "faultDescribe": undefined,        //故障描述
            "faultHandleDescribe": undefined,  //异常处理描述
            "handleUserId": undefined, //处理人
            "handleTime": undefined  //处理时间
          }
        ]
      },
      typeList: [],
      rules: {
        inspectionDate: { required: true, message: '必填', trigger: ['blur', 'change'] },
        inspectionStatus: { required: true, message: '必填', trigger: ['blur', 'change'] },
      }
    }
  },
  computed: {
    ascArr () {
      return {
        '1': '单选',
        '2': '多选',
        '3': '单项输入',
        '4': '多项输入'
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const params = {
        orderByFlag: '0',
        ascription: '1',
        orderByColumn: 'sort'

      }
      const queryuser = {
        status: '0'//正常
      }

      let { data: user } = await listUser(queryuser)
      this.userList = user
      if (this.title === '修改记录' || this.title === '记录详情') {//修改进入
        this.form = { ...this.rowObj }
        this.form.inspectionStatus = this.form.inspectionStatus === '0' ? '0' : '1'
        if (!this.form.inspectionPlaceRecordAbnormalList.length) {
          this.form.inspectionPlaceRecordAbnormalList.push(
            {
              "faultDescribe": undefined,        //故障描述
              "faultHandleDescribe": undefined,  //异常处理描述
              "handleUserId": undefined, //处理人
              "handleTime": undefined  //处理时间
            }
          )
        }
        console.log(this.form);
        this.ValueList = JSON.parse(this.form.recordJsonData)
      } else {
        let { data: data } = await getrecordAddList(params);
        this.ValueList = data
      }
      this.isshow = true
    },
    handlerParent (id) {
      this.typeList.forEach(element => {
        if (element.id === id) {
          this.form.ascription = element.ascription
        }
      });
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.inspectionStatus === '1') {

            for (let index = 0; index < this.form.inspectionPlaceRecordAbnormalList.length; index++) {
              const e = this.form.inspectionPlaceRecordAbnormalList[index];
              if (!e.faultDescribe) {
                return this.$message.error(`请填写列表内序号为${index + 1}的故障描述`)
              }
            }
          }
          // if () { this.form.inspectionPlaceRecordAbnormalList }
          if (this.title === '修改记录') {//修改
            let params = {
              ...this.form,
              recordJsonData: JSON.stringify(this.ValueList)
            }
            Updaterecord(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.clear()

              }
            })
          } else {//新增
            let params = {
              ...this.form,
              recordJsonData: JSON.stringify(this.ValueList)
            }
            Createdrecord(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.clear()
              }
            })
          }
        }
      });
    },
    handleadd () {
      this.form.inspectionPlaceRecordAbnormalList.push({
        "faultDescribe": undefined,        //故障描述
        "faultHandleDescribe": undefined,  //异常处理描述
        "handleUser": undefined, //处理人
        "handleTime": undefined  //处理时间
      })
    },
    handleDelete (index) {
      this.form.inspectionPlaceRecordAbnormalList.splice(index, 1)
    },
    clear () {
      this.$emit('quit')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>